<template>
	<div class="h-100 w-100 d-flex flex-column py-4">
		<HorizontalNav class="mx-5" v-model:navs="navs" />
		<!-- overflow-scroll hideScrollBar  -->
		<div id="discoverMusicList" class="flex-grow-1 position-relative px-5">
			<div class="container h-100">
				<div class="row d-flex flex-column align-items-center h-100">
					<div class="col-xxl-10 containerCol h-100">
						<router-view></router-view>
					</div>
				</div>
			</div>
			<!-- <CustomScrollBar v-if="!isLoading" listId="discoverMusicList" /> -->
		</div>
	</div>
</template>
<script lang="ts">
import store from "@/store";
import { computed, defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
	setup() {
		const state = reactive({
			navs: [
				{
					title: "个性推荐",
					active: true,
					path: "personalizedRec",
				},
				{
					title: "歌单",
					path: "songList",
				},
				{
					title: "排行榜",
					path: "rankingList",
				},
				{
					title: "主播电台",
					path: "",
				},
				{
					title: "歌手",
					path: "artist",
				},
				{
					title: "最新音乐",
					path: "",
				},
			],
			isLoading: computed(() => store.state.isLoading),
		});
		return {
			...toRefs(state),
		};
	},
});
</script>

<style scoped lang="scss"></style>
